<template>
	<!-- 更换服务项目弹窗 -->
	<view class="content">  
		<view class="prolist">
			<view class="fx-row proitem" >
				<view class="proimg">
					<image :src="projectInfos.cover" mode="heightFix" lazy-load></image>
				</view>
				<view class="proinfo fx-col-sb">
					<view class="fx-row-sb-c">
						<span class="ft28">{{projectInfos.name}}</span> 
					</view>
					<span class="ft24 grey2 mt10">{{projectInfos.recommend}}</span>
					<view class="fx-row-sta ft24 mt10" > 
						<span class="ft20 red">￥<span  class="ft40">{{projectInfos.discountPrice}}</span></span> 
						<span class="ml10 grey1"  style="text-decoration:line-through"><span>￥</span>{{projectInfos.price}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="service"> 
			<view class="ft32" >服务项目</view>
			<view class="s_list mt16">
				 <view class="labels fx-row-sta">
					 <view class="labe_item" :class=" {'active':tabindexs==index }" v-for="(item,index) in serviceLists" :key='item.id' @click="serviceTab(item,index)">{{item.name}}</view>
				 </view>
			</view>
		</view>
		<view class="fx-row-sb-c label_num">
			<view>购买数量</view> 
			<uv-number-box v-model="projectNum"   :min="0" :max="10" @change="snum($event,index,item.id)" :disabledInput="true">
				<template v-slot:minus>  
					<view :class="['minus',{'disable':projectNum=='0'}]"  >
						<uv-icon v-if="projectNum!='0'" name="minus" size="12" color="#fff"></uv-icon>
						<uv-icon v-else name="minus" size="12" color="#C7C7C7"></uv-icon>
					</view>
				</template>
				<template v-slot:input>
					<text class="input">{{projectNum}}</text>
				</template>
				<template v-slot:plus>
					<view :class="['plus',{'disable':projectNum=='10'}]" >
						<uv-icon  v-if="projectNum!='10'" name="plus" color="#fff" size="12"></uv-icon>
						<uv-icon  v-else name="plus" color="#C7C7C7" size="12"></uv-icon>
					</view>
				</template>
			</uv-number-box>
		</view>
		<!-- --> 
		<view class="sureCoupon">
			<view class="sure_btn" @click="sureCou">确认</view>
		</view> 
	</view>
</template>

<script>
	import {  } from '@/utils/api.js' 
	import { toast } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	export default { 
		props:[ 'tabindex','serviceList','projectInfo'],
		data() {
			return {
				addOrderId:'', 
				nums:'3',
				projectInfos:this.projectInfo,
				projectNum:'1',
				tabindexs: this.tabindex,
				serviceLists: this.serviceList
			}
		},
		watch:{
			 tabindex(newValue, oldValue) { 
					this.tabindexs = newValue
				},
			 serviceList(newValue, oldValue) { 
					this.serviceLists = newValue
				},
				projectInfo(newValue, oldValue) {
					console.log(newValue,"newValue");
					this.projectInfos = newValue
				},
				deep: true // 深度监听父组件传过来对象变化 
		},
		onLoad() {
			 
		},
		methods: { 
			// 项目数量改变
			snum(e,index,id){
				console.log(e,index);
				// this.serviceLists[index].num = e.value
				this.projectNum = e.value
				this.serviceLists.forEach((item,indexs)=>{
					console.log(item.num,typeof(item));
					if(id !== item.id){
						this.serviceLists[indexs].num = 0
					}else{
						this.addOrderId = this.serviceLists[indexs].id
					}
				})
			},
			// 确定更换服务内容
			sureCou(){
				// if(this.addOrderId==''){
				// 	return toast('请添加需要服务的项目！')
				// }
				if(this.projectNum==''){
					return toast('请添加服务的数量！')
				}
				this.$emit('placeOrder',this.projectInfos.id,this.projectNum)
			},
			// 立即预约
			// subscribe(){
			// 	if(this.addOrderId==''){
			// 		return toast('请添加需要服务的项目！')
			// 	}
			// 	if(this.projectNum==''){
			// 		return toast('请添加服务的数量！')
			// 	}
			// 	this.$emit('placeOrder',this.addOrderId,this.projectNum)
			// },
			// 切换项目
			serviceTab(item,index){
				this.$nextTick(()=>{
					this.projectInfos = item
				})
				this.tabindexs = index  
				console.log(item.name,this.projectInfo);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color:$uni-main-page ;
	} 
	.content{
		/*  #ifdef  H5  */
		margin-bottom: var(--window-bottom);
		/*  #endif  */ 
		/*  #ifdef  MP-WEIXIN  */
		margin-bottom: -100rpx;
		/*  #endif  */ 
		.sureCoupon{
			width: 670rpx;
			height: 138rpx;
			/*  #ifdef  MP-WEIXIN  */
			margin-bottom: 80rpx;
			/*  #endif  */ 
			padding: 0 40rpx;
			background-color:#fff ;
			.sure_btn{
				width: 670rpx;
				height: 88rpx;
				margin:25rpx 0;
				background-color: $uni-main;
				border-radius: 50rpx;
				font-size: 36rpx;
				text-align: center;
				line-height: 88rpx;
				color: #fff;
			}
		}
		.active{
			color: $uni-main;
			border: 1rpx solid $uni-main !important;
		}
		.prolist{
			padding: 24rpx 25rpx 16rpx 25rpx;
			border-bottom: 1rpx solid #e6e6e6;
			.proitem{
				margin-bottom: 16rpx;
				.proimg{
					width: 142rpx;
					height: 142rpx;
					margin-right: 24rpx;
					border-radius: 16rpx;
					overflow: hidden;
					image{
						height: 142rpx;
					}
				}
				.proinfo{
					width:510rpx ;
					height: 142rpx;
				}
			}
		}
	}
	.uv-safe-area-inset-bottom{
		padding-bottom: 0 !important;
	}
	 
	.label_num{
		width: 700rpx;
		padding:30rpx 25rpx ;
		border-top: 1rpx solid #EAEAEA;
		border-bottom: 1rpx solid #EAEAEA;
	}
	.service{
		width: 700rpx;
		max-height: 700rpx;
		padding: 0 25rpx;
		margin-top: 15rpx;
		overflow: hidden;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		.s_list{
			padding: 20rpx 0;
			 .labels{
				 flex-wrap: wrap;
				 font-size: 24rpx;
				 color: #9D9D9D;
				 .labe_item{ 
					 margin: 0 12rpx 24rpx 0;
					 padding: 15rpx 28rpx;
					 border: 1rpx solid #9D9D9D;
					 border-radius: 32rpx;
				 }
			 }
		}
	} 

	 
</style>
